<template>
  <div class="app">
    <son>
      <!-- vue2.6以前的插槽语法（已废弃） -->
      <!-- <template slot="top" slot-scope="scope"> -->
        
      <!-- 最新写法 -->
      <template v-slot:top="scope">
        <!-- 插值语法写在哪个组件里，那用到的数据就只是用这个组件里的数据 -->
        <!-- 但是插槽这个内容就是在组件内部使用的，我可能就是需要拿到组件内部的数据来显示 -->
        <!-- 这个时候就要用到作用域插槽 -->
        <!-- 作用：就是让组件内部的数据也能扩展到外部使用 -->
        <!-- scope是一个对象格式,里面就保存了所有组件内部通过插槽传递过来的数据 -->
        <!-- 名字不一定要叫scope,随便起都可以,但建议叫scope -->
        <h4>我是标题 -- {{ scope.msg }} --- {{ scope.list }} </h4>
      </template>

  

      <!-- 这里的v-slot:default可以不写 -->
      <!-- 因为默认插槽本来就可以不写名字 -->
      <!-- 但是大家要知道它有名字,只不过名字叫default -->

      <!-- 如果要接收插槽内部传递过来的数据用以下写法 -->
      <!-- <template v-slot:default="scope"> -->

      <!-- 或者简写为 v-slot -->
      <template v-slot="scope">
        <h4>我是默认插槽显示的内容 -- {{scope}}</h4>
      </template>


    </son>
  </div>
</template>

<script>

import son from './components/son'

export default {

  components: {
    son
  },

  data() {
    return {
      msg: '我是app里的msg数据',
    };
  },
};
</script>

<style>
</style>